<template>
  <div>
    <div class="address-window" :class="value === true ? 'on' : ''">
      <div class="title">
        选择银行卡
        <span class="iconfont icon-guanbi" @click="closeAddress"></span>
      </div>
      <div class="list" v-if="banklength>0">
        <div
          :class="item.id === checked ? 'font-color-red' : ''"
          v-for="(item, bankIndex) in banklist" 
          @click="tapbank(bankIndex)"
          :key="bankIndex"
        >
          <!-- <span class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-red' : ''"></span> -->
          <div class="info">
            <div class="icon"><img :src="item.bankIcon" alt="" class="img"></div>
            <div>{{item.bankAddress}}（尾号{{ item.hideCode }}）</div>
          </div>
          <!-- <span class="iconfont icon-complete" :class="item.id === checked ? 'font-color-red' : ''"></span> -->
        </div>
      </div>
      <div class="noinfo" v-if="banklength < 1">
        暂无银行账户信息~
      </div>
      <div 
		  class="addressBnt bg-color-red" 
		  style="background-color:rgb(89,102,163)!important;" 
		  @click="gobankPages"
	  >添加银行卡</div>
    </div>
    <div class="mask" @touchmove.prevent :hidden="value === false" @click="closeAddress"></div>
  </div>
</template>
<script>
import { getAddressList } from "@/api/user";
import { getBankList } from "@/api/eye";

export default {
  name: "AddressWindow",
  props: {
    value: Boolean,
    checked: Number
  },
  data: function() {
    return {
      banklist: [],
      banklength:'',
    };
  },
  mounted: function() {},
  methods: {
    //获取银行账户列表
    getBankList(){
      var data = {
        pageNumber:1,
        pageSize:100,
      };
      getBankList(data).then(res => {
		  res.data.content.forEach(item=>{
			  if(item.bankCode && item.bankCode.length > 4){
				  let a = item.bankCode.substring(item.bankCode.length-4);
				  this.$set(item,"hideCode",a);
			  }else{
				  this.$set(item,"hideCode",item.bankCode);
			  }
		  })
        this.banklist = res.data.content;
        this.banklength = res.data.totalElements;
      })
      .catch(err=>{
		  
      });
    },
    //获取用户信息
    User() {
      let that = this;
      getUser().then(res => {
        that.userInfo = res.data;
      });
    },
    closeAddress() {
      this.$emit("input", false);
    },
	// 添加银行卡页面
    gobankPages: function() {
		uni.navigateTo({
			url:'/pages/profit/addBankcard/index'
		})
      this.$emit("redirect");
    },
	// 银行卡点击
    tapbank(index) {
      this.$emit("checked", this.banklist[index]);
      // this.$emit("input", false);
    }
  }
};
</script>
<style>
.info{
  height: 120rpx;
  border-bottom: 0.5px solid #999999;
  /* border-radius: 10rpx; */
  text-align: center;
  line-height: 120rpx;
  font-size: 32rpx;
  color: #333333;
  /* background-image: linear-gradient(#5458FF, #5686FF); */
  display: flex;
  justify-content: center;
  width: auto;
  margin: 0 50rpx;

}

.info .icon{
  height: 45rpx;
  width: 45rpx;
  padding: 10rpx 20rpx 0 0; 
}

.info .icon .img{
  width: 100%;
  height: 100%;  
}
.noinfo{
  width: 100%;
  margin: 10% 0 20% 0;
  text-align: center;
  color: #999999;
}
</style>

